<template>
    <view class="home">
        <view class="bg"></view>
        <view class="content">
            <view class="h1">
                貂蝉到家
            </view>
            <view class="items">
                <view class="item" @click="toPath('/pages/index/index')">
                    <image style="width: 80rpx;height: 80rpx;" src="@/static/tabBar/home-active.png"></image>
				    <text class="grid-text">渠道</text>
                </view>
                <view v-if="isAdmin" class="item" @click="toPath('/pages/user/index')">
                    <image style="width: 80rpx;height: 80rpx;" src="@/static/tabBar/tech-active.png"></image>
				    <text class="grid-text">用户</text>
                </view>
            </view>
        </view>
        <view class="item logout" @click="logOut">
            <image style="width: 50rpx;height: 50rpx;" src="@/static/tuichudenglu.png"></image>
			<text style="font-size: 28rpx;padding-top: 10rpx;">退出登录</text>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                isAdmin: false
            }
        },
        onLoad(){
           const token = uni.getStorageSync('token')
           const isAdmin = uni.getStorageSync('is_admin')
           this.isAdmin = isAdmin
           if(!token){
             uni.reLaunch({ url: "/pages/login/index" })
           }
        },
        methods:{
            toPath(path){
                uni.navigateTo({ url: path })
            },
            logOut(){
                uni.clearStorageSync();
                uni.reLaunch({ url: "/pages/login/index" })
            }
        }
    }
</script>

<style lang="scss">
    .home{
        height: 100vh;
        position: relative;
    }
    .bg{
        width: 100%;
        height: 60vh;
        background: #526cf9;
        border-radius: 50%;
        position: absolute;
        top: -350px;
        transform: scale(1.5);
    }
    .content{
        height: 50vh;
        position: relative;
        .h1{
            font-size: 52rpx;
            color: #fff;
            text-align: center;
            padding-top: 100rpx;
        }
    }

    .items{
        height: 180rpx;
		background-color: #ffffff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 8px;
		margin: 8px;
		border-radius: 8px;

        margin-top: 320rpx;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .grid-text{
            margin-top: 20rpx;
            font-size: 32rpx;  
        }
    }
</style>